<template>
  <a-drawer v-model:visible="visible" title="任务日志详情" :width="575" :footer="false">
    <a-descriptions title="基本信息" :column="1" size="large" class="general-description">
      <a-descriptions-item label="日志 ID">{{ dataDetail?.id }}</a-descriptions-item>
      <a-descriptions-item label="任务 ID">{{ dataDetail?.jobId }}</a-descriptions-item>
      <a-descriptions-item label="任务标题">{{ dataDetail?.title }}</a-descriptions-item>
      <a-descriptions-item label="耗时">
        <a-tag v-if="dataDetail?.duration > 500" color="red"> {{ dataDetail?.duration }}ms </a-tag>
        <a-tag v-else-if="dataDetail?.duration > 200" color="orange"> {{ dataDetail?.duration }}ms </a-tag>
        <a-tag v-else color="green">{{ dataDetail?.duration }} ms</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="执行结果">
        <a-tag v-if="dataDetail?.result === 1" color="green">成功</a-tag>
        <a-tag v-else color="red">失败</a-tag>
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions
      title="请求参数"
      :column="2"
      size="large"
      class="general-description http"
      style="margin-top: 20px; position: relative"
    >
      <a-descriptions-item :span="2">
        <a-tabs type="card">
          <JsonPretty v-if="dataDetail?.param" :json="dataDetail?.param" />
          <span v-else>无</span>
        </a-tabs>
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions
      title="详情"
      :column="2"
      size="large"
      class="general-description http"
      style="margin-top: 20px; position: relative"
    >
      <a-descriptions-item :span="2">
        <span v-if="dataDetail?.result === 1" style="color: dodgerblue;">{{ dataDetail?.detail }}</span>
        <span v-else style="color: red;">{{ dataDetail?.detail }}</span>
      </a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script setup lang="ts">
import type { JobLogResp } from '@/apis/scheduler/type'

const dataDetail = ref<JobLogResp>()
const visible = ref(false)

// 打开
const onOpen = async (record: any) => {
  dataDetail.value = record
  visible.value = true
}

defineExpose({ onOpen })
</script>

<style scoped lang="scss">
.http :deep(.arco-descriptions-item-label-block) {
  padding-right: 0;
}

:deep(.arco-tabs-content) {
  padding-top: 5px;
  padding-left: 15px;
}
</style>
